<template>
    <el-form size='small'>
        <el-form-item>
            <el-radio v-model='radioValue' :label="1">
                周，允许的通配符[, - * ? / L #]
            </el-radio>
        </el-form-item>

        <el-form-item>
            <el-radio v-model='radioValue' :label="2">
                不指定
            </el-radio>
        </el-form-item>

        <el-form-item>
            <el-radio v-model='radioValue' :label="3">
                周期从星期
                <el-select clearable v-model="cycle01">
                    <el-option v-for="(item,index) of weekList" :key="index" :label="item.value" :value="item.key"
                        :disabled="item.key === 1">{{item.value}}</el-option>
                </el-select>
                -
                <el-select clearable v-model="cycle02">
                    <el-option v-for="(item,index) of weekList" :key="index" :label="item.value" :value="item.key"
                        :disabled="item.key < cycle01 && item.key !== 1">{{item.value}}</el-option>
                </el-select>
            </el-radio>
        </el-form-item>

        <el-form-item>
            <el-radio v-model='radioValue' :label="4">
                第
                <el-input-number v-model='average01' :min="1" :max="4" /> 周的星期
                <el-select clearable v-model="average02">
                    <el-option v-for="(item,index) of weekList" :key="index" :label="item.value"
                        :value="item.key">{{item.value}}</el-option>
                </el-select>
            </el-radio>
        </el-form-item>

        <el-form-item>
            <el-radio v-model='radioValue' :label="5">
                本月最后一个星期
                <el-select clearable v-model="weekday">
                    <el-option v-for="(item,index) of weekList" :key="index" :label="item.value"
                        :value="item.key">{{item.value}}</el-option>
                </el-select>
            </el-radio>
        </el-form-item>

        <el-form-item>
            <el-radio v-model='radioValue' :label="6">
                指定
                <el-select clearable v-model="checkboxList" placeholder="可多选" multiple style="width:100%">
                    <el-option v-for="(item,index) of weekList" :key="index" :label="item.value"
                        :value="String(item.key)">{{item.value}}</el-option>
                </el-select>
            </el-radio>
        </el-form-item>

    </el-form>
</template>

<script>
    export default {
        data() {
            return {
                radioValue: 2,
                weekday: 2,
                cycle01: 2,
                cycle02: 3,
                average01: 1,
                average02: 2,
                checkboxList: [],
                weekList: [
                    {
                        key: 2,
                        value: '星期一'
                    },
                    {
                        key: 3,
                        value: '星期二'
                    },
                    {
                        key: 4,
                        value: '星期三'
                    },
                    {
                        key: 5,
                        value: '星期四'
                    },
                    {
                        key: 6,
                        value: '星期五'
                    },
                    {
                        key: 7,
                        value: '星期六'
                    },
                    {
                        key: 1,
                        value: '星期日'
                    }
                ],
                checkNum: this.$options.propsData.check
            }
        },
        name: 'crontab-week',
        props: ['check', 'cron'],
        methods: {
            // 单选按钮值变化时
            radioChange() {
                if (this.radioValue !== 2 && this.cron.day !== '?') {
                    this.$emit('update', 'day', '?', 'week');
                }
                switch (this.radioValue) {
                    case 1:
                        this.$emit('update', 'week', '*');
                        break;
                    case 2:
                        this.$emit('update', 'week', '?');
                        break;
                    case 3:
                        this.$emit('update', 'week', this.cycleTotal);
                        break;
                    case 4:
                        this.$emit('update', 'week', this.averageTotal);
                        break;
                    case 5:
                        this.$emit('update', 'week', this.weekdayCheck + 'L');
                        break;
                    case 6:
                        this.$emit('update', 'week', this.checkboxString);
                        break;
                }
            },

            // 周期两个值变化时
            cycleChange() {
                if (this.radioValue == '3') {
                    this.$emit('update', 'week', this.cycleTotal);
                }
            },
            // 平均两个值变化时
            averageChange() {
                if (this.radioValue == '4') {
                    this.$emit('update', 'week', this.averageTotal);
                }
            },
            // 最近工作日值变化时
            weekdayChange() {
                if (this.radioValue == '5') {
                    this.$emit('update', 'week', this.weekday + 'L');
                }
            },
            // checkbox值变化时
            checkboxChange() {
                if (this.radioValue == '6') {
                    this.$emit('update', 'week', this.checkboxString);
                }
            },
        },
        watch: {
            'radioValue': 'radioChange',
            'cycleTotal': 'cycleChange',
            'averageTotal': 'averageChange',
            'weekdayCheck': 'weekdayChange',
            'checkboxString': 'checkboxChange',
        },
        computed: {
            // 计算两个周期值
            cycleTotal: function () {
                this.cycle01 = this.checkNum(this.cycle01, 1, 7)
                this.cycle02 = this.checkNum(this.cycle02, 1, 7)
                return this.cycle01 + '-' + this.cycle02;
            },
            // 计算平均用到的值
            averageTotal: function () {
                this.average01 = this.checkNum(this.average01, 1, 4)
                this.average02 = this.checkNum(this.average02, 1, 7)
                return this.average02 + '#' + this.average01;
            },
            // 最近的工作日（格式）
            weekdayCheck: function () {
                this.weekday = this.checkNum(this.weekday, 1, 7)
                return this.weekday;
            },
            // 计算勾选的checkbox值合集
            checkboxString: function () {
                let str = this.checkboxList.join();
                return str == '' ? '*' : str;
            }
        }
    }
</script>